<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02计算器</title>
</head>
<body>
    <input type="text" id="i1" placeholder="请输入数字1"><br>
    <input type="text" id="i2" placeholder="请输入数字2"><br>
    <button onclick="jia()">加</button>
    <button onclick="jian()">减</button>
    <button onclick="cheng()">乘</button>
    <button onclick="chu()">除</button>

<!--    <button onclick="f()">按钮</button>-->
    <h3>运算结果:<span id="jieguo"></span></h3>
    <script>
        // function f() {
        //     let n1 = document.getElementById("i1").value;
        //     console.log(n1);
        // }
        function jia() {
            let value1 = document.getElementById("i1").value;
            let value2 = document.getElementById("i2").value;
            let value = Number(value1)+Number(value2);
            console.log(value);
            let span = document.getElementById("jieguo");
            span.innerHTML= String(value);
        }
        function jian() {
            let value1 = document.getElementById("i1").value;
            let value2 = document.getElementById("i2").value;
            let value = Number(value1)-Number(value2);
            console.log(value);
            let span = document.getElementById("jieguo");
            span.innerHTML= String(value);

        }
        function cheng() {
            let value1 = document.getElementById("i1").value;
            let value2 = document.getElementById("i2").value;
            let value = Number(value1)*Number(value2);
            console.log(value);
            let span = document.getElementById("jieguo");
            span.innerHTML= String(value);
        }
        function chu() {
            let value1 = document.getElementById("i1").value;
            let value2 = document.getElementById("i2").value;
            let value = Number(value1)/Number(value2);
            console.log(value)
            let span = document.getElementById("jieguo");
            span.innerHTML= String(value);
        }


    </script>
</body>
</html>